<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import Evolve from "./OrderDetailsPage/Evolve.vue";
import OrderUserInfo from "./OrderDetailsPage/OrderUserInfo.vue";
import StatusDetails from "./OrderDetailsPage/StatusDetails.vue";
import { getOrderDetail, getGoodsDetail } from "@/api/goods";
import type { OrderDetail, GoodsDetail } from "@/types/order";
import { storeToRefs } from "pinia";
import { useOrder } from "@/store/useOrder";

const route = useRoute();
const orderStore = useOrder();
const { reloadOrderDetails } = storeToRefs(orderStore);
const orderId = ref("");
const goodsId = ref("");

watch(reloadOrderDetails, (reload) => {
  if (reload) {
    fetchOrderDetail();
    orderStore.setReloadOrderDetails(false);
  }
});

// 获取商品详情
const goodsDetails = ref<GoodsDetail | null>(null);
const orderDetail = ref<OrderDetail | null>(null);
const isLoading = ref(true);
const hasError = ref(false);
const active = ref(2);

onMounted(() => {
  orderId.value = route.query.id as string;
  goodsId.value = route.query.gid as string;
  if (orderId.value && goodsId.value) {
    getGoodsDetails();
    fetchOrderDetail();
  }
});

// tab切换
const changeTab = (index: number) => {
  active.value = index;
};

const getGoodsDetails = async () => {
  try {
    const { data } = await getGoodsDetail({
      id: goodsId.value,
    });
    goodsDetails.value = data;
    orderStore.setGoodsDetails(data);
  } catch (e) {
    console.error("获取商品详情失败:", e);
    hasError.value = true;
  }
};

const fetchOrderDetail = async () => {
  isLoading.value = true;
  hasError.value = false;
  try {
    const response = await getOrderDetail({ orderId: orderId.value });
    orderDetail.value = response.data;
    orderStore.setOrderDetails(response.data);
  } catch (error) {
    console.error("获取订单详情失败:", error);
    hasError.value = true;
  } finally {
    isLoading.value = false;
  }
};

const updateOrderDetails = () => {
  fetchOrderDetail();
};
</script>

<template>
  <div class="tabs-box">
    <p class="tabs">
      <span :class="{ active: active === 1 }" @click="changeTab(1)">订单进展</span>
      <span :class="{ active: active === 2 }" @click="changeTab(2)">订单详情</span>
    </p>
  </div>
  <div v-if="isLoading" class="loading">
    <el-skeleton :rows="5" animated />
  </div>
  <div v-else-if="hasError" class="error">
    <el-result icon="error" title="获取订单详情失败" sub-title="请稍后重试或联系客服">
      <template #extra>
        <el-button type="primary" @click="fetchOrderDetail">重试</el-button>
      </template>
    </el-result>
  </div>
  <div v-else class="order-info">
    <div class="left">
      <Evolve
        v-if="active === 1"
        :orderDetails="orderDetail"
        :goodsDetails="goodsDetails"
      />
      <StatusDetails
        v-if="active === 2"
        :orderDetails="orderDetail"
        :goodsDetails="goodsDetails"
        @update:orderDetails="updateOrderDetails"
      />
    </div>
    <div class="right">
      <OrderUserInfo :orderDetails="orderDetail" :goodsDetails="goodsDetails" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.tabs-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 24px;

  .tabs {
    display: flex;
    align-items: center;

    span {
      margin-right: 40px;
      cursor: pointer;
      line-height: 30px;

      &.active {
        color: #1dbf73;
        font-weight: bold;
        position: relative;

        &:after {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background: #1dbf73;
          position: absolute;
          bottom: -10px;
          left: 0;
        }
      }
    }
  }

  a {
    width: 108px;
    height: 36px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    line-height: 36px;
    color: #fff;
    text-decoration: none;
  }
}
.order-info {
  display: flex;
  .left {
    flex: 1;
    margin-right: 20px;
  }
}
</style>
